<template>
  <div ref="mychart" class="chart" style="width: 100%;height: 3.26rem"></div>
</template>

<script>
import { debounce } from '@tv/utils/debunce';
import * as echarts from './echarts.min';

export default {
  props: {
    eData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      chart: null,
      opt: {}
    };
  },
  mounted () {
    this.initBarChart();
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize();
      }
    }, 20);
    window.addEventListener('resize', this.__resizeHanlder);
  },
  beforeDestroy () {
    if (!this.chart) {
      return;
    }
    window.removeEventListener('resize', this.__resizeHanlder);
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initBarChart () {
      let dom = this.$refs.mychart
      this.chart = echarts.echarts.init(dom);
      this.chart.setOption(this.eData);
      this.chart.resize()
    }
  },
  watch: {
    eData(val){ 
      this.initBarChart()
    }
  }
};
</script>
